<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <style type="text/css">
    .login-box{
      display:flex;
      flex-direction:column;
      align-items:center;
      border: 1px solid blue;
      width: 30%;
      margin: 0 auto;
      margin-top: 15%;
      background: #00000080;
      padding: 20px 50px;

    }
    .login-box h1{
      color: white;
    }
    .item input{
      display:flex;
      width: 200px;
      border: 0;
      border-bottom: 5px solid white;
      font-size: 18px;
      background: #ffffff00;
      color: white;
      padding: 5px 10px;
    }
    .login-box button{
      display:flex;
      border: 0;
      width: 150px;
      height: 30px;
      margin-top: 18px;
      font-size: 18px;
      color: white;
      border-radius: 25px;
      background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);

    }
    .item i{
      display:flex;
      color: white;
      font-size: 18px;
    }

  </style>
    <title>Title</title>
</head>

<body>
<form action="#" method="POST">
  <div class="login-box">
     <h1>Login</h1>

    <div class="form">
      <div class="item">
        <i class="fa fa-user-circle" aria-hidden="true"></i> <!-- 将来用来绘制username前面的图标 -->
        <input type="text" placeholder="username" name="username"> <!-- 用文本框实现的username的输入 -->
      </div>

      <div class="item"> <!-- password部分 -->
        <i class="fa fa-key" aria-hidden="true"></i> <!-- 将来用来绘制password前面的图标 -->
        <input type="password" placeholder="password" name="password"> <!-- 用password文本框实现的密码输入 -->
      </div>

    </div>

    <button type="submit">Login</button> <!-- 用button实现的Login登陆按钮 -->
  </div>
</form>
</body>

</html>